﻿@using Microsoft.AspNet.Identity
@model SocialGoal.Web.ViewModels.GoalViewModel
@{
	ViewBag.Title = Model.GoalName;
	ViewContext.Controller.ViewBag.IncludeJqplot = true;
	Layout = "~/Views/Shared/_GoalLayout.cshtml";
    string goalstatus = Model.GoalStatus.GoalStatusType;
}

@Html.Hidden("Targt", Model.Target)
@Html.Hidden("Met", Model.MetricId)
@Html.Hidden("GoalId", @Model.GoalId)
@Html.HiddenFor(m => m.GoalId)
@Html.Hidden("Updates", Model.Updates.Count())
<div class="well" style="height: 170px;">
    <div class="span5" style="float:left;">
        @if (User.Identity.GetUserId() != Model.UserId)
        { 
            <div style="position: relative; margin-right: 20px">
                <div id="support@(Model.GoalId)" style ="float:right">
                    @if (@Model.Supported == true)
                    {
                        <div style="float: right">
                            <input type="button"  class="btn btn-primary" value="Unfollow" id="UnSupportBtn" onclick ="UnSupportGoal(@Model.GoalId)"  />
                        </div>
						 
					}
					else if (@Model.Supported == false)
					{
						<div style="float: right">
							<input type="button"  class="btn btn-primary" value="Follow" id="SupportBtn" onclick ="SupportGoalNow(@Model.GoalId)"  />
						</div>
						  
                    }
                </div>
            </div>
        }
        <h4 style="margin-left:10px;">@Model.GoalName
            @if (User.Identity.GetUserId() == Model.UserId)
            {
                <a href="#" id ="editBtn" onclick ="window.location.href='@Url.Action("Edit", "Goal", new { id = Model.GoalId })'" style="padding-right:5px;">
                    <span rel="tooltip" title="Edit goal"><i class="icon-edit"></i></span></a>
                <a href="#" id="delete" onclick="window.location.href='@Url.Action("Delete", "Goal", new { id = Model.GoalId })'">
                    <span rel="tooltip" title="Delete goal"><i class="icon-trash"></i></span></a>
            }
        </h4>
        <div class="span7">
        <small>@Model.Desc</small>
        </div>
        <div class="span7">
            <small>Created by @Html.ActionLink(Model.User.UserName, "UserProfile", "Account", new { id = Model.UserId }, null)
                On @Model.CreatedDate.ToString("dd MMM yyyy -   hh:mm tt ") </small>
        </div>
    </div>
    <div class="span4" style="float: right; padding-bottom: 10px;">
        <table class="table">
            <tr>
                <td>
                    <strong>Start Date</strong> : @Html.DisplayFor(m => m.StartDate)
                </td>
            </tr>
            <tr>
                <td>
                    <strong>End Date</strong> : @Html.DisplayFor(m => m.EndDate) 
                    @if (Model.EndDate < DateTime.Now)
                    {
                        <span class="label label-important">Date Exceeded</span>
                    }
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Metric</strong> :
                    @if (Model.Metric == null)
                    { 

                        <text> No Metric</text>
                    }
                    else
                    { 
                        @Html.DisplayFor(m => m.Metric.Type)
                    }
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Target</strong>:
                    @if (Model.Target == null)
                    {
                        <text>No Target</text>
                    }
                    else
                    { 
                        @Html.DisplayFor(m => m.Target)
                    }
                </td>
            </tr>
            <tr><td><strong>GoalStatus</strong>:@Html.DisplayFor(m=>m.GoalStatus.GoalStatusType)</td></tr>
        </table>
    </div>
</div>
<!--Update section -->
<div class="span6 well" style="margin-left: 0px;">
    @if (User.Identity.GetUserId() == Model.UserId )
    {    
            
        <table class="table" id="UpdatePostContent">

            <thead>
                <tr>
                    <th>
                        <h5>
                            Post Your Update</h5>
                    </th>
                </tr>
            </thead>
            <tr>
                <td>@Html.TextArea("Update", "", new { @class = "span12", placeholder = "Add an update for this goal" })
                <div id="UpdateValidation"></div>
                </td>
            </tr>
           
            @if (Model.Metric != null)
            {		
                <tr>
                    <td class="span8">
                        <div class="input-append">
                            @if (Model.Metric != null)
                            { 
                                <input type="text" id="Status" onfocus="clearStatusError()" class="span8" placeholder="Add new satus of this update" /> 
                            }
                            @if (Model.Metric != null && Model.Target != null)
                            { <span class="add-on">/@Model.Target @Model.Metric.Type</span>}
                        </div>
                        <input type="button"  class="btn btn-primary pull-right" value="Post" id="postupdate" onclick="saveUpdate('@Model.Target','@Model.MetricId');" @*disabled ="disabled"*@  />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="statusError">
                        </div>
                    </td>
                </tr>
            }
        </table>
    }
    <div id="divupdate" style="margin: 0px;">
        <h5 style="margin-left:15px;">Latest Updates</h5>
        @{ Html.RenderAction("DisplayUpdates", "Goal", Model.GoalId); }
    </div>
    <div id="divInviteLayer" class="jqmWindow">
        <div id="handle" style="float: right">
            <a href="#" class="jqmClose">Close</a>
        </div>
        <div id="DivInviteContent">
        </div>
    </div>
</div>
<!--Update section ends here-->
<!--Right  section -->
<div class="span6">
    <!--Graph  section -->
    <div id="graph">
        @Html.Action("ReportPage", new { id = Model.GoalId })
        @Html.Hidden("goalId", Model.GoalId)
    </div>
    <!--Graph  section end here-->
    <!--update status section and invite user section -->
    <div class="span12" style="float: right;">
        <!--invite user section -->
        @Html.Action("InviteUser", "Goal", new { id = Model.GoalId })
        <!--invite section ends -->
        <!--update status section -->
        <div class="well span6" style="min-height: 202px;">
            <strong>Goal Status</strong>
            <hr />
            @if (User.Identity.GetUserId() == Model.UserId)
            {
                <div id="goalStatus">
                    @Html.DropDownListFor(model => model.GoalStatusId, Model.GoalStatuses, new { @class = "span7", id = "GoalStatusId", onchange = "EnableDrpDwn();" })
                    <input type="button" id="drpdwnBtn" class="btn btn-primary" value="Change" onclick="DropDownChange();"
                        disabled="disabled" style="height: 28px; margin-bottom: 10px;" />
                </div>
                    
            }
            else
            {
                @Html.DisplayFor(m => m.GoalStatus.GoalStatusType)                               
            }
        </div>
        <!--update status section ends -->
    </div>
    <!--update status section here -->
</div>
<!--right section ends here -->
<script type="text/javascript">
    $(document).ready(function(){
    var goalstatus="@goalstatus";
    
    if(goalstatus=="Completed")
    {
        $("#UpdatePostContent").hide();
        $(".EditDeleteUpdate").hide();
    }
    
    
    });

	$(function () {
		$("#Update").focus(function () {
			$(this).animate({ "height": "85px" }, "slow");
			return false;
		});
		$("#Update").blur(function () {
			$("#Update").animate({ "height": "22px" }, "slow");
			return false;
		});
	});

    //    function EnablePostButton() {
    //        $("#postupdate").removeAttr("disabled");
    //    }

    //    function DisablePostButton() {
    //        $("#postupdate").attr("disabled", "disabled");
    //    }
	function CommentExpandInUpdate(UpdateId,commentcount) {
		var Updateid = UpdateId;
		var url = '/Goal/DisplayComments';
		$.get(url, { 'updateId': Updateid }, function (result) {

			$("#divcommentUpdate" + Updateid.toString()).html(result);
            if(commentcount!=0)
            {
			$("#divcommentUpdate" + Updateid.toString()).toggle("slow");
            }
			$('#CommentText' + Updateid.toString()).focus();
		});

	}
	function checkKey(e, id) {
		evt = e || window.event;
		if (evt.keyCode == 13) {
			updateComment(id);
			e.preventDefault();
		}

	}
    
    $(window).resize(function () {
        var url = '/Goal/ReportPage';
        $.get(url, { 'id': @Model.GoalId }, function (data) {
            $('#graph').html(data);
        });
    });

    //    function updateComment(id) {
    //        var Updateid = id;

    //        var CurrCommnt = $("#CommentText" + id.toString()).val();

    //        var url2 = '/Goal/DisplayCommentCount';
    //        var url = '/Goal/SaveComment';
    //        var PostData = { 'UpdateId': Updateid, 'CommentText': CurrCommnt };
    //        $.post(url, PostData, function (result) {
    //            $("#divcommentUpdate" + id.toString()).html(result);
    //            $("#CommentText" + id.toString()).val('');

    //            $.get(url2, { 'UpdId': Updateid }, function (data) {

    //                $("#commentToggle" + id.toString()).html( '<text> | </text>'+data + ' Comments<i class="icon-comment"></i>');
    //            });

    //        });
    //    }

    $('#Update').focusout(function(){
        if ($('#Update').val() == '') {
			 $('#UpdateValidation').html('<label class="field-validation-error">Please Enter Update</label>');
		}        
		else 
        {
            $('#UpdateValidation').html('');
        }
    
    });
    
 

	function saveUpdate(target, metric) {

		var update = 'Please Enter Update';
		var status = 'Please Enter Status';
		//$("#postupdate").attr("disabled", "true");

		var Gid = $('#GoalId').val();
		var CurrUpdte = $('#Update').val();
		var CurrStatus = $('#Status').val();

		if ($('#Update').val() == '') {
			 $('#UpdateValidation').html('<label class="field-validation-error">Please Enter Update</label>');
           
			//$("#postupdate").removeAttr("disabled");
		}        
		else 
        {
            $('#UpdateValidation').html('');
			var PostData = { 'GoalId': Gid, 'Updatemsg': CurrUpdte, 'status': CurrStatus };
			var url = '/Goal/SaveUpdate';
            var numericCheck=DecimalValidate(CurrStatus);
           
            if( (CurrStatus=='') || (CurrStatus!='' && numericCheck))
            {
			    $.post(url, PostData, function (response) {
				    LoadReport();
				    $("#divupdate").html(response);
				    $("#Update").val('');
				    $("#Status").val('');
				   // $("#postupdate").removeAttr("disabled");

			    });
            }
            else
            {
                $("#statusError").html('<label style="color:red;">Enter a valid status.</label>');
            }
		}
	}


</script>
